<template>
  <div id="add_goods_app">
    <el-dialog title="收货地址" :visible.sync="isShow.flag" :fullscreen="true">
      <el-tabs v-model="active">
        <el-tab-pane label="基础信息" name="first">
          <div class="line"></div>
          <el-form :model="form" label-width="80px" :rules="rules">
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select
                v-model="form.first_cateid"
                placeholder="请选择一级分类"
                @change="changeCate"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in cateList"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类" prop="second_cateid">
              <el-select
                v-model="form.second_cateid"
                placeholder="请选择二级分类"
              >
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in cate_children"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="form.goodsname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="零售价格" prop="price">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市场价格" prop="market_price">
              <el-input
                v-model="form.market_price"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :auto-upload="false"
                v-model="form.img"
                :on-change="change_img"
                :file-list="img_list"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="规格名称" prop="specsid">
              <el-select
                v-model="form.specsid"
                placeholder="请选择规格名称"
                @change="changeSpecs"
              >
                <el-option
                  :label="specs.specsname"
                  :value="specs.id"
                  v-for="specs in specsList"
                  :key="specs.id"
                  >{{ specs.specsname }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="规格属性" prop="specsattr">
              <el-select
                v-model="form.specsattr"
                placeholder="请选择活动区域"
                :multiple="true"
              >
                <el-option
                  :label="specs"
                  :value="i"
                  v-for="(specs, i) in specs_children"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否热卖" prop="ishot">
              <el-radio-group v-model="form.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否新品" prop="isnew">
              <el-radio-group v-model="form.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="second">
          <wangeditor
            ref="w_ref"
            v-model="form.description"
            width="100%"
            height="500"
            id="description"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow.flag = false">取 消</el-button>
        <el-button type="primary" @click="sumit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from "vue-wangeditor";
import { mapState, mapActions } from "vuex";
export default {
  props: ["isShow"],
  data() {
    return {
      img_list: [],
      cate_children: [],
      specs_children: [],
      form: {
        description: "",
        first_cateid: "",
        goodsname: "",
        img: "",
        ishot: "",
        isnew: "",
        market_price: "",
        price: "",
        second_cateid: "",
        specsattr: [],
        status: "",
        specsid: "",
      },
      active: "first",
      rules: {
        first_cateid: {
          required: true,
          message: "一级分类不能为空",
          trigger: "blur",
        },
        goodsname: {
          required: true,
          message: "商品名称不能为空",
          trigger: "blur",
        },
        ishot: { required: true, message: "是否热卖不能为空", trigger: "blur" },
        isnew: { required: true, message: "是否新品不能为空", trigger: "blur" },
        market_price: {
          required: true,
          message: "市场价格不能为空",
          trigger: "blur",
        },
        price: { required: true, message: "零售价格不能为空", trigger: "blur" },
        second_cateid: {
          required: true,
          message: "二级分类不能为空",
          trigger: "blur",
        },
        specsattr: {
          required: true,
          message: "规格属性不能为空",
          trigger: "blur",
        },
        status: {
          required: true,
          message: "商品状态不能为空",
          trigger: "blur",
        },
        specsid: {
          required: true,
          message: "规格名称不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("cate_model", ["cateList"]), //加载分类
    ...mapState("specs_model", ["specsList"]), //加载规格
  },
  methods: {
    sendData(obj) {
      this.form = { ...obj };
      delete this.form.firstcatename;
      delete this.form.secondcatename;
      //二级分类
      this.changeCate(obj.first_cateid);
      //规格属性
      this.changeSpecs(obj.specsid);
      this.form.specsattr = obj.specsattr.split(",");
      //图片
      this.img_list =
        obj.img !== "" ? [{ url: this.$static_url + obj.img }] : [];
      //富文本
      setTimeout(() => {
        this.$refs.w_ref.setHtml(obj.description);
      }, 200);
    },
    change_img(file) {
      this.form.img = file.raw;
    },
    sumit() {
      this.form.specsattr = this.form.specsattr.join(",");
      this.form.description = this.$refs.w_ref.getHtml();
      //   console.log(this.form);
      var formData = new FormData();
      //提交请求
      for (let obj in this.form) {
        formData.append(obj, this.form[obj]);
      }
      //   console.log(formData.get("first_cateid"));
      //   console.log(formData.get("goodsname"));
      var url = "/goodsadd";
      if (this.form.id) {
        url = "/goodsedit";
      }
      this.$axios.post(url, formData).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.form = {
            description: "",
            first_cateid: "",
            goodsname: "",
            img: "",
            ishot: "",
            isnew: "",
            market_price: "",
            price: "",
            second_cateid: "",
            specsattr: [],
            status: "",
            specsid: "",
          };
          this.isShow.flag = false;
          this.$emit("reload");
        }
      });
    },
    changeCate(id) {
      var index = this.cateList.findIndex((item) => {
        return item.id === id;
      });
      this.cate_children = this.cateList[index].children;
    },
    changeSpecs(id) {
      var index = this.specsList.findIndex((item) => {
        return item.id === id;
      });
      this.specs_children = this.specsList[index].attrs;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    ...mapActions("cate_model", ["cateListActions"]), //加载分类
    ...mapActions("specs_model", ["specsListActions"]), //加载规格
  },
  created() {
    this.cateListActions();
    this.specsListActions({ page: 1, size: 999 });
  },
  components: {
    wangeditor,
  },
};
</script>

<style>
</style>